<template>
  <NuxtLink class="my_btn">
    <span class="link_circle">
      <img src="~/assets/img/icon/btn_arrow.png" alt="" />
    </span>
    <span class="u-outer">
      <span class="label">
        <span>{{ text }}</span>
        <span class="mt-1 left_text">{{ text }}</span>
      </span>
    </span>
  </NuxtLink>
</template>
<script setup lang="ts">
const props = defineProps({
  text: {
    type: String,
    default: "了解更多",
  },
  bColor: {
    type: String,
    default: "#E4E4E4",
  },
});
</script>
<style lang="scss" scoped>
$cwidth: 2rem;
$padd: 2rem;
$theme: #c245bf;
.my_btn {
  box-sizing: border-box;
  padding: 0.4rem 0.3rem;
  font-size: 0;
  position: relative;
  display: inline-block;
  align-self: center;
  align-items: center;
  color: #666;
  background-color: transparent;
  border: 1px solid v-bind(bColor);
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.26, 0.06, 0, 1) 0.3s,
    background-color 0.8s cubic-bezier(0.26, 0.06, 0, 1) 0.3s,
    border-color 0.8s cubic-bezier(0.26, 0.06, 0, 1) 0.3s;
  .link_circle {
    border-radius: 50%;
    width: $cwidth;
    height: $cwidth;
    display: inline-block;
    position: absolute;
    transition: left 0.8s;
    transition-timing-function: cubic-bezier(0.47, 0.16, 0.24, 1);
    left: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $theme;
    img {
      width: 12px;
    }
  }
  .u-outer {
    display: inline-block;
    overflow: hidden;
    height: $cwidth;
    line-height: $cwidth;

    .label {
      overflow: hidden;
      display: inline-block;
      height: 100%;
      span {
        display: block;
        transition: transform 0.45s cubic-bezier(0.47, 0.16, 0.24, 1) 0.3s;
        font-size: 1rem;
        // transform: scale(0.9);
        &:first-child {
          padding-left: $cwidth + $padd;
          padding-right: $padd;
        }
        &:last-child {
          padding-left: $padd;
          padding-right: $cwidth + $padd;
        }
      }
    }
  }

  &:hover {
    color: white;
    background-color: $theme;
    .link_circle {
      left: calc(100% - ($cwidth + 0.4rem));
    }
    .u-outer {
      .label {
        span {
          transform: translate3d(0, -110%, 0);
        }
      }
      .left_text {
        // margin-top: 0px;
      }
    }
  }
}
</style>
